import { Drawer } from '@/component/Drawer';
import classnames from "classnames";
import { useEffect, useMemo, useState } from 'react';
import { IDraftItem } from '../draftsMgr';
import { DraftListItem } from './DraftListItem';
import styles from './style.module.less';

export interface IDraftListViewProps {
  open?: boolean;
  onChange?(open: boolean): void
  list?: IDraftItem[];
  actived_draft_id?: string;
  selected_draft_ids?: string[];
  disabled?: boolean;
  on_item_actived?: (i: IDraftItem) => void;
  on_items_selected?: (i: IDraftItem[]) => void;
  on_click_delete?: (i: IDraftItem[]) => void;
}

// ↶↷
export function DraftListView(props: IDraftListViewProps) {
  const {
    open = true,
    actived_draft_id,
    selected_draft_ids,
    list,
    disabled = false,
    onChange,
    on_item_actived,
    on_items_selected,
    on_click_delete,
  } = props;

  const [, set_start_draft_id] = useState(actived_draft_id);
  const [end_draft_id, set_end_draft_id] = useState(actived_draft_id)

  useEffect(() => {
    set_start_draft_id(actived_draft_id)
    set_end_draft_id(actived_draft_id)
  }, [actived_draft_id]);

  const selected_items = useMemo(() => {
    const ret: IDraftItem[] = [];
    if (!list || !selected_draft_ids) return ret;
    for (let idx = 0; idx < selected_draft_ids.length; idx++) {
      const id = selected_draft_ids[idx];
      const item = list.find(o => o.draft_id === id)
      if (!item) continue;
      ret.push(item)
    }
    return ret;
  }, [selected_draft_ids, list])

  const inner = useMemo(() => {
    const cancel_selection = (it: IDraftItem) => {
      on_item_actived?.(it)
      on_items_selected?.([it])
      set_start_draft_id(it.draft_id)
      set_end_draft_id(it.draft_id)
    }
    return <>
      <ul
        className={classnames(styles.draft_list)}
        style={{ outline: 'none' }}
        tabIndex={-1}
        onBlur={e => {
          const it = list?.find(v => v.draft_id === actived_draft_id);
          if (it) cancel_selection(it)
        }}>
        {list?.map(it => {
          const actived = it.draft_id === actived_draft_id
          const is_anchor = it.draft_id === end_draft_id
          const selected = !!selected_draft_ids?.find(v => v === it.draft_id)
          const on_click = (e: React.MouseEvent) => {
            if (e.shiftKey) {
              cancel_selection(it)
              // TODO:
              // const a = list.findIndex(other => other.draft_id === start_draft_id);
              // const b = list.findIndex(other => other.draft_id === it.draft_id);
              // const need_selected = !!selected_draft_ids?.find(v => v === start_draft_id);
              // if (a < 0 || b < 0) {
              //   cancel_selection(it)
              //   return;
              // }
              // const min_idx = Math.min(a, b);
              // const max_idx = Math.max(a, b);
              // set_end_draft_id(it.draft_id)
            } else if (e.ctrlKey) {
              if (!selected_draft_ids) {
                on_items_selected?.([it])
              } else if (selected_draft_ids.indexOf(it.draft_id) >= 0) {
                set_start_draft_id(it.draft_id);
                set_end_draft_id(it.draft_id)
                on_items_selected?.(selected_items.filter(v => v.draft_id !== it.draft_id));
              } else {
                set_start_draft_id(it.draft_id);
                set_end_draft_id(it.draft_id)
                on_items_selected?.([...selected_items, it]);
              }
            } else {
              cancel_selection(it)
            }
          }
          return (
            <DraftListItem
              key={it.draft_id}
              item={it}
              onClick={on_click}
              on_click_delete={() => on_click_delete?.([it])}
              actived={is_anchor ? false : actived}
              disabled={disabled}
              is_anchor={is_anchor}
              selected={selected}
            />
          )
        })}
      </ul>
    </>
  }, [list, on_item_actived, on_items_selected, actived_draft_id, end_draft_id, selected_draft_ids, disabled, selected_items, on_click_delete])

  return (
    <Drawer
      open={open}
      onChange={onChange}
      className={styles.draft_list_drawer}>
      {inner}
    </Drawer>
  );
}
